# Quick start

## Online example

We provide an online example based on Rsbuild. The example gives an intuitive feel for the build performance of Rspack and the development experience of Rsbuild:

- [Rsbuild CodeSandbox example](https://codesandbox.io/p/github/rspack-contrib/rsbuild-codesandbox-example)

## Setup environment

Rsbuild supports using [Node.js](https://nodejs.org/), [Deno](https://deno.com/), or [Bun](https://bun.sh/) as the runtime.

### Node.js

For Node.js, you will need to install Node.js >= version 16, it is recommended to use the Node.js LTS version.

Check the current Node.js version with the following command:

```bash
node -v
```

If you do not have Node.js installed in current environment, or the installed version is too low, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install.

Here is an example of how to install via nvm:

```bash
# Install Node.js LTS
nvm install --lts
# Switch to Node.js LTS
nvm use --lts
```

## Create an Rsbuild application

Use [create-rsbuild](https://www.npmjs.com/package/create-rsbuild) to create a new Rsbuild application. Run the following command:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm create rsbuild@latest',
    yarn: 'yarn create rsbuild',
    pnpm: 'pnpm create rsbuild@latest',
    bun: 'bun create rsbuild@latest',
  }}
/>

Follow the prompts step by step. During the creation process, you can choose whether you need additional tools like TypeScript, ESLint, etc.

After the application is created, you can follow these steps:

- Run `git init` to initialize the Git repository.
- Run `npm install` (or the install command of your package manager) to install npm dependencies.
- Run `npm run dev` to start the development server, which runs on `localhost:5173` by default.

### Templates

When creating an application, you can choose from the following templates provided by `create-rsbuild`:

| Template | Description                     | Optional Features |
| -------- | ------------------------------- | ----------------- |
| vanilla  | Vanilla JavaScript              | TypeScript        |
| react    | [React 19](https://react.dev/)  | TypeScript        |
| react18  | [React 18](https://react.dev/)  | TypeScript        |
| vue      | [Vue 3](https://vuejs.org/)     | TypeScript        |
| vue2     | [Vue 2](https://v2.vuejs.org/)  | TypeScript        |
| lit      | [Lit](https://lit.dev/)         | TypeScript        |
| preact   | [Preact](https://preactjs.com/) | TypeScript        |
| svelte   | [Svelte 5](https://svelte.dev/) | TypeScript        |
| solid    | [Solid](https://solidjs.com/)   | TypeScript        |

`create-rsbuild` provides out-of-the-box basic templates. You can also get more templates through the following ways:

- Visit [Rspack - Ecosystem](https://rspack.rs/guide/start/quick-start#ecosystem) to learn about various higher-level tools based on Rsbuild.
- Visit [awesome-rspack - Starter](https://github.com/web-infra-dev/awesome-rspack?tab=readme-ov-file#starter) to get more community-maintained templates.

### Optional tools

`create-rsbuild` can help you set up some commonly used tools, including [Biome](https://github.com/biomejs/biome), [ESLint](https://github.com/eslint/eslint), and [prettier](https://github.com/prettier/prettier). You can use the arrow keys and the space bar to make your selections. If you don't need these tools, you can simply press Enter to skip.

```
◆  Select additional tools (Use <space> to select, <enter> to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
└
```

:::tip
Biome provides similar linting and formatting features to ESLint and Prettier. If you select Biome, you typically won't need to choose ESLint or Prettier as well.
:::

### Current directory

To create an application in the current directory, set the target folder to `.`:

```
◆  Create Rsbuild Project
│
◇  Project name or path
│  .
│
◇  "." is not empty, please choose:
│  Continue and override files
```

### Quick creation

[create-rsbuild](https://npmjs.com/package/create-rsbuild) provides some CLI flags. By setting these CLI flags, you can skip the interactive selection steps and create the application with one command.

For example, to create a React application in the `my-app` directory with one command:

```bash
npx create-rsbuild --dir my-app --template react

# Using abbreviations
npx create-rsbuild -d my-app -t react

# Specify multiple tools
npx create-rsbuild -d my-app -t react --tools eslint --tools prettier
```

All the CLI flags of `create-rsbuild`:

```
Usage: create-rsbuild [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  --tools          select additional tools (biome, eslint, prettier)
  --override       override files in target directory

Templates:

  react-js, react-ts, vue3-js, vue3-ts, vue2-js, vue2-ts, svelte-js, svelte-ts, solid-js, solid-ts, vanilla-js, vanilla-ts
```

## Migrate from existing projects

To migrate from an existing project to Rsbuild, refer to the following guides:

- [Migrate from webpack](/guide/migration/webpack)
- [Migrate from Create React App](/guide/migration/cra)
- [Migrate from Vue CLI](/guide/migration/vue-cli)
- [Migrate from Vite](/guide/migration/vite)
- [Migrate from Modern.js Builder](/guide/migration/modern-builder)
- [Migrate from Tsup to Rslib](https://rslib.rs/guide/migration/tsup)
- [Migrate from Storybook to Storybook Rsbuild](https://rspack.rs/guide/migration/storybook)

### Other projects

If your project does not belong to the above migration guides, you can manually install the [@rsbuild/core](https://npmjs.com/package/@rsbuild/core) package:

<PackageManagerTabs command="add @rsbuild/core -D" />

After installation, you can refer to the following documents to configure your project:

- See [CLI](/guide/basic/cli) to learn about available CLI commands.
- See [Plugin List](/plugins/list/index) to select Rsbuild plugins.
- See [Configure Rsbuild](/guide/configuration/rsbuild) to configure Rsbuild.

## CLI

Rsbuild comes with a lightweight CLI that includes commands such as `dev` and `build`.

```json title="package.json"
{
  "scripts": {
    // starting the dev server
    "dev": "rsbuild dev",
    // build the app for production
    "build": "rsbuild build",
    // preview the production build locally
    "preview": "rsbuild preview"
  }
}
```

Refer to the [CLI](/guide/basic/cli) to learn about all available commands and options.

## Entry module

By default, Rsbuild CLI uses `src/index.(js|ts|jsx|tsx)` as the entry module. You can modify the entry module using the [source.entry](/config/source/entry) option.

```ts title="rsbuild.config.ts"
export default {
  source: {
    entry: {
      foo: './src/pages/foo/index.ts',
      bar: './src/pages/bar/index.ts',
    },
  },
};
```

## Core packages

### @rsbuild/core

<a
  href="https://npmjs.com/package/@rsbuild/core"
  target="_blank"
  style={{ display: 'block', marginTop: '16px' }}
>
  <img
    src="https://img.shields.io/npm/v/@rsbuild/core?style=flat-square&colorA=564341&colorB=EDED91"
    alt="@rsbuild/core"
    style={{ pointerEvents: 'none' }}
  />
</a>

Rsbuild core package, providing CLI commands and JavaScript API.

### create-rsbuild

<a
  href="https://npmjs.com/package/create-rsbuild"
  target="_blank"
  style={{ display: 'block', marginTop: '16px' }}
>
  <img
    src="https://img.shields.io/npm/v/create-rsbuild?style=flat-square&colorA=564341&colorB=EDED91"
    alt="create-rsbuild"
    style={{ pointerEvents: 'none' }}
  />
</a>

Create a new Rsbuild project.

## Next step

You may want:

import NextSteps from '@components/NextSteps';
import Step from '@components/Step';

<NextSteps>
  <Step
    href="/guide/start/features"
    title="All features"
    description="Learn all features of Rsbuild"
  />
  <Step
    href="/guide/configuration/rsbuild"
    title="Config"
    description="Learn how to configure Rsbuild"
  />
  <Step
    href="https://github.com/web-infra-dev/rsbuild"
    title="Support Rsbuild"
    description="Support us with a star ⭐️"
  />
</NextSteps>
